<template>
	<view class="container">
		<view class="content-box">
			<u-swipe-action>
				<u-swipe-action-item @click='swipeClick(item)' :options="options" v-for="item in list" :key="item.id">
					<!-- 文章 -->
					<view class="item-box" @click="hairCommunityClick(item)">
						<img :src="item.image?item.image:baseUrl+'/static/error.png'" alt="" />
						<view class="right-box">
							<view class="tilte-top">{{item.title}}</view>
							<view class="tilte-center">{{item.introduction}}</view>
							<view class="title-bottom">
								<view style="display: flex; font-size: 20rpx; margin-right: 20rpx"><u-icon
										name="chat"></u-icon><text>{{item.commentQuantity}}</text>
								</view>
								<view style="display: flex; font-size: 20rpx"><u-icon
										name="heart"></u-icon><text>{{item.likeQuantity}}</text></view>
							</view>
						</view>
					</view>
					<!-- 问题 -->
					<!-- <view class="content-box">
						<view class="item-box-dy" v-for="i in 10 " :key='i' @click="hairCommunityClick">
							<view class="right-box">
								<view class="tilte-top">
									<view class="d-text-w">问</view>
									<view class="title-w">脱发前期有什么症状脱发前期有什么症状脱发前期有什么症状</view>
								</view>
								<view class="tilte-center">
									<view class="d-text-d">答</view>
									<view class="title-w">有一种脱发叫'雄激素性脱发'，特征就是皮出油多，毛发变细等等毛发变细等等毛发变细等等</view>
								</view>
								<view class="title-bottom">
									<view style="display: flex;font-size: 20rpx;margin-right: 20rpx;"><u-icon
											name="chat"></u-icon><text>2112</text>
									</view>
									<view style="display: flex;font-size: 20rpx;"><u-icon
											name="heart"></u-icon><text>31112</text></view>
								</view>
							</view>

						</view>
					</view> -->
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	import {
		unCollector,
	} from "@/api/axios/HairCommunity.js";
	import {
		favorite
	} from '@/api/axios/center.js'
	export default {
		data() {
			return {
				options: [{
					text: "删除",
					style: {
						backgroundColor: "#ff3b2a",
					},
				}, ],
				list: [],
				baseURL: this.staticURL,
				openId: ''
			};
		},
		methods: {
			hairCommunityClick(data) {
				let obj = {
					...data,
				};

				uni.navigateTo({
					url: "/pages/HairCommunityDetail/index?id=" +
						data.id +
						"&isLike=" +
						data.isLike +
						"&isFavorite=" +
						data.isFavorite,
				});
			},
			swipeClick(data) {
				let _this = this
				unCollector({
					openId: this.openId,
					articlesId: data.id,
				}).then((res) => {
					favorite({
						params: {
							openId: _this.openId
						}
					}).then(res => {
						if (res) {
							_this.list = res
						} else {
							_this.list = []
						}
					})
				});
			}
		},
		async onLoad() {
			this.openId = await uni.getStorageSync('openId')
			favorite({
				params: {
					openId: this.openId
				}
			}).then(res => {
				this.list = res
			})
		}
	};
</script>

<style lang="scss">
	@import "index.scss";
</style>